<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
<div id="app">

    <div class="container-fluid">
        <!--标题行-->
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3"><h1 class="text-center">用户列表</h1></div>
        </div>

        <!--数据行-->
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
                <!--添加按钮-->
                <a href="javascript:;" class="btn btn-success btn-sm"  @click="restUserData">添加</a>
                <!--列表-->
                <table class="table table-striped table-bordered" style="margin-top: 10px;">
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>工资</th>
                        <th>年龄</th>
                        <th>简介</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="user in users" :key="user.id">
                        <td>{{user.id}}</td>
                        <td>{{user.name}}</td>
                        <td>{{user.salary}}</td>
                        <td>{{user.age}}</td>
                        <td>{{user.des}}</td>
                        <td>
                            <a href="javascript:;" class="btn btn-danger btn-sm" @click="delUser(user.id)">删除</a>
                            <a href="" class="btn btn-info btn-sm" @click.prevent="userEditDetail(user.id)">修改</a>
                        </td>
                    </tr>
                </table>
                <!--添加 和 修改表单-->
                <form>
                    <div class="form-group" v-show="user.id">
                        <label class="control-label">编号</label>
                        <div>
                            <p class="form-control-static">{{user.id}}</p>
                            <input readonly v-model="user.id">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" v-model="user.name" id="name" placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label for="salary">工资</label>
                        <input type="text" class="form-control" v-model="user.salary" id="salary" placeholder="输入工资">
                    </div>
                    <div class="form-group">
                        <label for="age">年龄</label>
                        <input type="text" class="form-control" v-model="user.age" id="age" placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label for="description">个人简介</label>
                        <input type="text" class="form-control" v-model="user.des" id="description"
                               placeholder="输入个人简介">
                    </div>

                    <button type="button" class="btn btn-info btn-block" @click="saveOrUpdate">提交</button>
                </form>
            </div>
        </div>
    </div>


</div>
</body>
</html>
<!--引入vue-->
<script src="../js/vue.js"></script>
<!--引入axios-->
<script src="../js/axios.min.js"></script>
<script>

    var app = new Vue({
        el: "#app",
        data: {
            msg: "vue 生命周期",
            users: [], //定义一个users空数组,用来存储所有的用户信息
            user: {},//定义一个空的json对象
        },
        methods: {
            saveOrUpdate() {
                if (!this.user.name){
                    alert("姓名不能为空")
                }
                if(!(this.user.name.length>=2)){
                    alert("用户名长度不能小于3位")
                    return;
                }
                axios.post("http://localhost:8990/saveOrUpdate", this.user).then(res => {
                    alert("用户信息提交成功");
                    this.findAll();
                }).catch(err => {
                    alert("操作失败")
                });
            },
            findAll(){
                axios.get("http://localhost:8990/users").then(res => {
                    this.users = res.data
                })
            },
            //将当前点击的用户信息回显
            userEditDetail(id){
                axios.get("http://localhost:8990/user/"+id).then(res=>{
                    this.user = res.data;
                })
            },
            restUserData(){
                this.user ={};
            },
            delUser(id) {
                axios.delete("http://localhost:8990/delete/" + id).then(res => {
                    alert("删除成功");
                    this.findAll();
                }).catch(err => {
                    alert("用户删除失败")
                });
            }
        },
        computed: {},
        created() {
            this.findAll();
        }
    })
</script>